<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore } from '../stores/UserStorage'

const userStore = useUserStore()

const formData = ref({
  name: '',
  skill: ''
})

const editingId = ref<number | null>(null)
const showForm = ref(false)

const openAddForm = () => {
  editingId.value = null
  formData.value = { name: '', skill: '' }
  showForm.value = true
}

const openEditForm = (user: { id: number; name: string; skill: string }) => {
  editingId.value = user.id
  formData.value = { name: user.name, skill: user.skill }
  showForm.value = true
}

const closeForm = () => {
  showForm.value = false
  editingId.value = null
  formData.value = { name: '', skill: '' }
}

const handleSubmit = () => {
  if (!formData.value.name.trim() || !formData.value.skill.trim()) {
    alert('请填写完整信息')
    return
  }

  if (editingId.value !== null) {
    userStore.updateUser(editingId.value, formData.value)
  } else {
    userStore.addUser(formData.value)
  }
  closeForm()
}

const handleDelete = (id: number) => {
  if (confirm('确定要删除该用户吗？')) {
    userStore.deleteUser(id)
  }
}
</script>

<template>
  <div class="user-list-container">
    <div class="header">
      <h1>用户列表</h1>
      <div class="actions">
        <button @click="openAddForm" class="btn btn-primary">新增用户</button>
      </div>
    </div>

    <div class="status-info">
      <span>当前状态: </span>
      <span :class="userStore.valid ? 'status-valid' : 'status-invalid'">
        {{ userStore.valid ? '有效' : '无效' }}
      </span>
    </div>

    <div v-if="userStore.users.length === 0" class="empty-state">
      暂无用户数据，请添加用户
    </div>

    <table v-else class="user-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>技能</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in userStore.users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.skill }}</td>
          <td>
            <button @click="openEditForm(user)" class="btn btn-edit">修改</button>
            <button @click="handleDelete(user.id)" class="btn btn-delete">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <div v-if="showForm" class="modal-overlay" @click="closeForm">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h2>{{ editingId !== null ? '修改用户' : '新增用户' }}</h2>
          <button @click="closeForm" class="close-btn">×</button>
        </div>
        <form @submit.prevent="handleSubmit" class="form">
          <div class="form-group">
            <label>姓名:</label>
            <input v-model="formData.name" type="text" required />
          </div>
          <div class="form-group">
            <label>技能:</label>
            <input v-model="formData.skill" type="text" required />
          </div>
          <div class="form-actions">
            <button type="submit" class="btn btn-primary">确定</button>
            <button type="button" @click="closeForm" class="btn btn-cancel">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

